/*
 * @Description: 最热标签侧边栏
 * @Author: YWJ 
 * @Date: 2022-04-20 22:11:26 
 * @Last Modified by: YWJ
 * @Last Modified time: 2022-05-17 10:29:40
 */
<template>
  <el-card :body-style="{ padding: '8px 18px' }">
    <div slot="header" class="me-tag-header">
      <span>最热标签</span>
      <a @click="moreTags" class="me-pull-right me-tag-more">查看全部</a>
    </div>

    <ul class="me-tag-list">
      <li class="me-tag-item">
        <!--type="primary"-->
        <van-badge :content="tags[0].articleNum">
          <div style="width: 76px; height: 40px">
            <el-button
              @click="tag(tags[0].tagId)"
              type="primary"
              style="width: 100%; height: 100%; margin: 0"
              round
              plain
              >{{ tags[0].tagContent }}</el-button
            >
          </div>
        </van-badge>
      </li>
      <li class="me-tag-item">
        <!--type="primary"-->
        <van-badge :content="tags[1].articleNum">
          <div style="width: 70px; height: 36px">
            <el-button
              @click="tag(tags[1].tagId)"
              size="medium"
              type="primary"
              style="width: 100%; height: 100%; margin: 0"
              round
              plain
              >{{ tags[1].tagContent }}</el-button
            >
          </div>
        </van-badge>
      </li>
      <li class="me-tag-item">
        <!--type="primary"-->
        <van-badge :content="tags[2].articleNum">
          <div style="width: 56px; height: 32px">
            <el-button
              @click="tag(tags[2].tagId)"
              size="small"
              type="primary"
              style="width: 100%; height: 100%; margin: 0"
              round
              plain
              >{{ tags[2].tagContent }}</el-button
            >
          </div>
        </van-badge>
      </li>
      <li class="me-tag-item">
        <!--type="primary"-->
        <van-badge :content="tags[3].articleNum">
          <div style="width: 56px; height: 28px">
            <el-button
              @click="tag(tags[3].tagId)"
              size="mini"
              type="primary"
              style="width: 100%; height: 100%; margin: 0"
              round
              plain
              >{{ tags[3].tagContent }}</el-button
            >
          </div>
        </van-badge>
      </li>
    </ul>
  </el-card>
</template>

<script>
export default {
  name: "CardTag",
  props: {
    tags: Array,
  },
  data() {
    return {};
  },
  methods: {
    //查看全部的tag
    moreTags() {
      this.$router.push("/tag/all");
    },
    //查看标签下的文章
    tag(id) {
      this.$router.push({ path: `/tag/${id}` });
    },
  },
};
</script>

<style scoped>
.me-tag-header {
  font-weight: 600;
}

.me-tag-more {
  font-size: 14px;
  color: #78b6f7;
}

.me-tag-list {
  list-style-type: none;
}

.me-tag-item {
  display: inline-block;
  padding: 4px;
  font-size: 14px;
  color: #5fb878;
}

.me-tag-item a:hover {
  text-decoration: underline;
}
</style>